<template>
  <div class="app">
    <div class="title">
      <div>作业列表</div>
      <div>
        <div></div>
        <div><el-button @click="setDialog">添加作业</el-button></div>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="作业ID" width="150" align="left" />
        <el-table-column prop="name" label="作业名称" width="600" align="center" />
        <el-table-column prop="className" label="班级名称" width="200" align="center" />
        <el-table-column prop="difficulty" label="操作" align="right">
          查看
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          :page-size="14"
          background
          layout="prev, pager, next"
          :total="max"
          @current-change="currentChange"
        />
      </div>
    </div>
  </div>
  <el-dialog
    v-model="dialogVisible"
    title="添加新题"
    width="50%"
    :before-close="handleClose"
  >
    <div>
      <el-form :model="form" label-width="120px">
        <el-form-item label="作业名称">
          <el-input v-model="form.name" :rows="2" />
        </el-form-item>
        <el-form-item label="选择班级">
          <el-select v-model="form.classId" class="m-2" placeholder="Select">
            <el-option
              v-for="item in ClassArr"
              :key="item.class_id"
              :label="item.class_name"
              :value="item.class_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="作业内容">
          <el-button @click="addChoose">添加题</el-button><br />
        </el-form-item>
        <div v-for="(data, index) in dataArr" :key="index">
          <Choose :data="data" :indexNum="index" /><br />
        </div>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addHomework">发布</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="dialog" title="选择题" width="40%" :before-close="handleClose">
    <div>
      <el-radio v-model="radioType" label="custom" size="large">自定义</el-radio>
      <el-radio v-model="radioType" label="questionBank" size="large">题库选择</el-radio>
      <div v-if="radioType == 'custom'">
        <el-form :model="choose" label-width="120px">
          <el-form-item label="题目">
            <el-input v-model="choose.title" :rows="2" type="textarea" />
          </el-form-item>
          <el-form-item label="评分">
            <el-input-number v-model="choose.score" :min="1" :max="100" />
          </el-form-item>
          <el-form-item label="难度">
            <el-input-number v-model="choose.difficulty" :min="1" :max="3" />
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="choose.grouping" class="m-2" placeholder="Select">
              <el-option
                v-for="item in chooseType"
                :key="item.label"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="选项">
            <el-form-item label="A:" label-width="30px">
              <el-input v-model="choose.options.A"></el-input>
            </el-form-item>
            <el-form-item label="B:" label-width="30px">
              <el-input v-model="choose.options.B"></el-input>
            </el-form-item>
            <el-form-item label="C:" label-width="30px">
              <el-input v-model="choose.options.C"></el-input>
            </el-form-item>
          </el-form-item>
          <el-form-item label="答案">
            <el-select v-model="choose.answer" class="m-2" placeholder="Select">
              <el-option
                v-for="item in answerArr"
                :key="item.label"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="radioType == 'questionBank'">
        <el-form :model="choose" label-width="120px">
          <el-form-item label="类型">
            <el-select
              v-model="choose.grouping"
              class="m-2"
              placeholder="Select"
              :onChange="setGrouping"
            >
              <el-option
                v-for="item in chooseType"
                :key="item.label"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="题目">
            <el-select v-model="chooseData" class="m-2" placeholder="Select">
              <el-option
                v-for="item in getChooseArr"
                :key="item.id"
                :label="item.title"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="评分">
            <el-input-number v-model="choose.score" :min="1" :max="100" />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialog = false">取消</el-button>
        <el-button type="primary" @click="addChooseOne">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import {Homework, Home} from "@/api"
import {HomeworkType, ClassType, ChooseType} from "@/interface"
import {ElMessage, ElMessageBox} from "element-plus"
import {onMounted, reactive, Ref, ref} from "vue"
import Choose from "../../components/Choose.vue"
const dialogVisible = ref(false)
const dialog = ref(false)
const tableData = ref([])
const max = ref(0)
const radioType = ref("questionBank")
let form = reactive({
  name: "",
  classId: 0
})

const getChooseArr = ref()
const answerArr = [
  {
    label: "A"
  },
  {
    label: "B"
  },
  {
    label: "C"
  }
]
let choose = reactive({
  title: "",
  options: {
    A: "",
    B: "",
    C: ""
  },
  difficulty: 0,
  grouping: "",
  answer: "",
  score: 1
})
const addChooseOne = () => {
  dialog.value = false
  if (radioType.value == "questionBank") {
    choose = {
      ...chooseData.value,
      score: choose.score,
      options: JSON.parse(chooseData.value.options)
    }
  }
  dataArr.value.push(JSON.parse(JSON.stringify(choose)))
}
const setDialog = () => {
  form.name = ""
  form.classId = 0
  dataArr.value = []
  dialogVisible.value = true
}
const addChoose = () => {
  dialog.value = true
  choose.title = ""
  choose.options = {
    A: "",
    B: "",
    C: ""
  }
  choose.difficulty = 0
  choose.score = 0
  choose.answer = ""
  choose.grouping = ""
}
const chooseType = [
  {
    label: "数学"
  },
  {
    label: "语文"
  },
  {
    label: "英语"
  }
]
const chooseData = ref()
const dataArr: Ref<ChooseType[]> = ref([])
const ClassArr: Ref<ClassType[] | null> = ref(null)
onMounted(async () => {
  const res = await Home.getClassListByTeacherId({teacherId: 1})
  ClassArr.value = res.data.classData[0].Grades
  const resMax = await Homework.getHomeworkByTeacherIdMax({teacherId: 1})
  max.value = resMax.data.chooseMax
  upDate()
})
const setGrouping = async (val: string) => {
  const res = await Homework.getChooseByGrouping({grouping: val})
  getChooseArr.value = res.data.groupingData
  console.log(res)
}
const upDate = async (page: number = 1) => {
  const res = await Homework.getHomeworkByTeacherIdPage({teacherId: 1, page: page})
  tableData.value = res.data.HomeworkArr.map((item: HomeworkType) => ({
    ...item,
    className:
      ClassArr.value &&
      ClassArr.value.filter((items: ClassType) => items.class_id == item.class_id)[0]
        .class_name
  }))
}
const currentChange = (val: number) => {
  upDate(val)
}
const addHomework = async () => {
  const homework = {
    ...form,
    teacherId: 1,
    homeworkData: JSON.stringify(dataArr.value)
  }
  const res = await Homework.homeworkIssue(homework)
  if (res.code == 0) {
    ElMessage({
      message: res.msg,
      type: "success"
    })
    dialogVisible.value = false
    upDate()
  } else {
    ElMessage.error(res.msg)
  }
}
const handleClose = (done: () => void) => {
  ElMessageBox.confirm("是否退出编辑")
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
</script>

<style lang="scss" scoped>
.app {
  padding: 50px;
  .title {
    display: flex;
    justify-content: space-between;
    & > div {
      display: flex;
      & > div {
        margin-left: 30px;
      }
    }
  }
  .table {
    margin-top: 50px;
    height: 600px;
    position: relative;
    .pagination {
      position: absolute;
      bottom: -50px;
      right: 20px;
    }
  }
}
</style>
